<template>
    <el-dialog title="新 增" :visible.sync="thisAddPage" :before-close="handleClose">
        <el-form ref="tasteFrom" :model="tasteFrom" label-width="135px" :rules="rules">
        <el-form-item label="口味名称" prop="methodValue">
            <el-input v-model="tasteFrom.methodValue" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="排序号" prop="sort">
            <el-input type="sort" v-model.number="tasteFrom.sort" autocomplete="off" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="关联分类" prop="categoryIdArry">
            <el-select v-model="categoryIdArry" multiple placeholder="请选择关联分类" style="width: 80%;">
								<el-option v-for=" (item,key) of categoryList" :key="key" :value="item.id" :label="item.categoryName"></el-option>
						</el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('tasteFrom')">保存</el-button>
            <el-button @click="resetForm('tasteFrom')">重 置</el-button>
            <el-button @click="closeAddChange">取 消</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import { save} from '@api/restaurant/merchant/productTaste'
import { findAllFirstList} from '@api/restaurant/merchant/productCategory'
export default {
  data () {
    return {
      thisAddPage: this.addPage,
      tasteFrom: {
        id: '',
        methodGroupNo : '11',
        methodName: '做法',
        methodValue: '',
        categoryIds: '',
        sort: ''
      },
      categoryList: [],
      categoryIdArry: [],
      rules: {
        methodValue: [
          { required: true, message: '请输入口味名称', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序号', trigger: 'blur' }
        ],
        categoryIdArry: [
          { required: true, message: '请选择关联分类', trigger: 'change' }
        ]
      }
    }
  },
  /** 双向绑定 start */
  props: ['addPage'],
  watch: {
    addPage (val) {
      this.thisAddPage = val// ②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
    },
    thisAddPage (val) {
      this.$emit('on-addPage-change', val)// ③组件内对myResult变更后向外部发送事件通知
    }
  },
  /** 双向绑定 end */
  methods: {
    closeAddChange () {
      this.thisAddPage = !this.thisAddPage
      this.$refs['tasteFrom'].resetFields()
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.tasteFrom.categoryIds = JSON.stringify(this.categoryIdArry).replace('[','').replace(']','')
          save(this.tasteFrom).then(res => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.$emit('on-loadlist-change')// ③组件内对myResult变更后向外部发送事件通知
            this.loading = false
            this.closeAddChange()
          }).catch(err => {
            console.log('err', err)
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    handleClose (done) {
      this.$confirm('确定关闭吗？').then(() => {
        done()
        this.$refs['tasteFrom'].resetFields()
      }).catch(() => {

      })
    },
    getAllFirstList () {
      this.loading = true
      findAllFirstList({

      }).then(res => {
        this.categoryList = res.data;
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    }
  },
  mounted () {
    this.getAllFirstList()
  }
}
</script>
